<template>
    <QilinTree v-model:treeConfig="treeConfig" ref="treeConfigRef"></QilinTree>
    <el-button @click="confirmSelected">设置选中</el-button>
    <el-button @click="getSelected">获取选中</el-button>
    <el-button @click="cancelSelected">取消选中</el-button>
</template>

<script setup>
import { reactive, ref,onMounted } from "vue";

/*
    响应式选项区域
*/

/*
    数据变量定义区域
*/
const treeConfigRef  =ref(null);

/*
    计算属性等代码区域
*/

/*
    逻辑脚本代码区域
*/
const confirmSelected=()=>{
    // treeConfigRef.value.setCheckedNodes([{
    //     name: "看守所项目",
    //     id: 11,
    // }]);
    treeConfigRef.value.setCheckedKeys([1],false);
};
const getSelected=()=>{
    const data = treeConfigRef.value.getCheckedKeys();
    const data1 = treeConfigRef.value.getCheckedNodes(false,true);
    console.log(data,data1);
};
const cancelSelected=()=>{
    // treeConfig.itemConfig.defaultCheckedKeys.forEach((item)=>{
    //     treeConfigRef.value.setChecked(item,false,true);
    // });
    treeConfigRef.value.setChecked(1,false,true);
};

const treeConfig = reactive({
    itemConfig: {
        showCheckbox: true,
        nodeKey: "id",
        defaultCheckedKeys:[],
        defaultExpandedKeys:[3]
    },
    props: {
        label: "name",
        children: "children",
    },
    data: []
});

/*
    生命周期等代码区域
*/
onMounted(()=>{
    setTimeout(()=>{
        treeConfig.data = [
            {
                name: "南京冠霆智能科技有限公司",
                id: 1,
                children: [
                    {
                        name: "看守所项目",
                        id: 11,
                    },
                    {
                        name: "拘留所项目",
                        id: 12,
                    },
                    {
                        name: "戒毒所项目",
                        id: 13,
                    },
                    {
                        name: "安康医院项目",
                        id: 14,
                    },
                ],
            },
            {
                name: "亚信安全有限公司",
                id: 2,
                children: [
                    {
                        name: "亚信智网有限公司",
                        id: 21,
                        children: [
                            {
                                name: "SDP零信任项目",
                                id: 211,
                            },
                            {
                                name: "动态应用安全防护系统BSG",
                                id: 212,
                            },
                        ],
                    },
                ],
            },
            {
                name: "苏软科技（南京）有限公司",
                id: 3,
                children: [
                    {
                        name: "云上贵州项目",
                        id: 31,
                    },
                    {
                        name: "红花街道h5项目",
                        id: 32,
                    },
                    {
                        name: "温州市党政机关信息化项目",
                        id: 33,
                    },
                ],
            },
            {
                name: "南京联创智慧城市科技有限公司",
                id: 4,
                children: [
                    {
                        name: "U创办公管理系统",
                        id: 41,
                    },
                    {
                        name: "U创办公小程序",
                        id: 42,
                    },
                ],
            },
        ];
    },1000);
});
</script>

<style lang="scss" scoped>
.QilinTree {
    // width:100px;
}
</style>
